<template>
  <div class="player_tool">
    <div class="player_container">
      <div class="player_item">
        <!-- <EasyPlayer
          class="player_box"
          :ref="`videoRef${videoObject.id}`"
          live
          muted
          autoplay
          :video-url="videoObject.vs"
          style="width: 100%; height: 200px"
          @error="restartPlayer"
        >
        </EasyPlayer> -->
      </div>
    </div>
    <div class="canvas_container" v-if="isLabel">
      <CanvasTool></CanvasTool>
    </div>
  </div>
</template>

<script>
import CanvasTool from '@/components/CanvasTool';
// import EasyPlayer from '@easydarwin/easyplayer';
export default {
  name: 'CustomPlayer',
  components: {
    CanvasTool,
  },
  data() {},
  props: {
    videoObject: {
      type: Object,
      default: () => {
        return {
          id: null,
          channelUrl: null,
        };
      },
    },
    isLabel: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    restartPlayer() {
      this.$nextTick(() => {
        this.$refs[`videoRef${this.videoObject.id}`].destroy();
        this.$refs[`videoRef${this.videoObject.id}`].$el.remove();
        this.$nextTick(() => {
          this.$refs[`videoRef${this.videoObject.id}`].$mount(
            this.$refs[`videoRef${this.videoObject.id}`].$el
          );
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.player_tool {
  position: relative;
}

.player_container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: cover; /* 视频填充方式 */
}

.canvas_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.player_item {
  position: relative;
  padding-bottom: 56%;
  background-color: #000;
  border: 1px #fff solid;
}

.player_box {
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

/* 开启录像 */
// ::v-deep
//   .easyplayer-controls-right
//   .easyplayer-controls-item.easyplayer-record {
//   display: none;
// }
</style>
